<template>
    <div class="container">
        <div class="nav_wraper">
            <div class="nav_bar">
                <div class="logo">LOGO</div>

                <div class="menu_toggle">
                    <i class="el-icon-s-operation"></i>
                </div>

                <ul class="nav_menu" v-for="(item, key) in navs">
                    <li @mouseenter="handleMouseenter(item)" @mouseleave="handleMouseleave">
                        <div>{{item.name}}</div>

                    </li>
                        <div class="menus" v-if="showMentuItem" @mouseenter="handleMouseenter(item)" @mouseleave="handleMouseleave">
                            {{menudata}}
                        </div>
                </ul>

            </div>

        </div>

        <!-- 轮播图 -->
        <Swiper class="swiper_wraper"></Swiper>

    </div>
</template>
<script>
import Swiper from '@/views/swiper/index'
export default {
    name: "index",
    components: {
        Swiper
    },
    data() {
        return {
            navs: [
                {name: '首页'},
                {name: '产品与服务'},
                {name: '中日未来产业中心'},
                {name: '新闻中心'},
                {name: '企业文化'},
                {name: '关于我们'},
            ],

            showMentuItem: false,

            menudata: null
        }
    },

    created() {

    },
    methods: {

        handleMouseenter(item) {
            this.showMentuItem = true
            console.log(item.name);
            this.menudata = item.name
        },

        handleMouseleave() {
            this.showMentuItem = false
        }
    }
};
</script>

<style lang="scss" scope>
// @import './site'
</style>
